<template>
    <div>
        <div class="header">智慧酒店管理系统</div>
        <div class="content">
            <div class="left">
                <ol>
                    <li>会员管理</li>
                    <ul>
                        <li @click="memberlist">会员列表</li>
                        <li @click="memberquanyi">权益列表</li>
                        <li @click="memberorderquanyi">分配权益列表</li>
                        <li @click="memberlv">等级列表</li>
                    </ul>
                    <li>门店管理</li>
                    <ul>
                        <li>门店添加</li>
                        <li>门店列表</li>
                    </ul>
                    <li>优惠券管理</li>
                    <ul>
                        <li @click="memberyou">优惠券添加</li>
                        <li @click="membershow">优惠券列表</li>
                    </ul>
                    <li>房型管理</li>
                    <ul>
                        <li @click="houseadd">房价计划添加</li>
                        <li @click="houselist">房价计划列表</li>
                    </ul>
                </ol>
            </div>
        <div class="right">
            <RouterView></RouterView>
        </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
//创建一个路由，作用：实现页面跳转并且传参
const router = useRouter();
const memberlist = () => {
    router.push('/member/MemberList.vue');
}


const memberquanyi = () => {
    router.push('/main/Memquan.vue');
}

const memberorderquanyi=()=>{
    router.push('/main/ShowRights.vue');
}


const memberlv = () => {
    router.push('/maean/Memlv.vue');
}

const memberyou = () => {
    router.push('/components/discount/Youhui.vue');
}

const membershow = () => {
    router.push('/components/discount/Memshow.vue');
}

const houseadd = () => {
    router.push('/components/House/AddRoomPrice.vue');
}

const houselist = () => {
    router.push('/components/house/Houselist.vue');
}
</script>

<style scoped>
.header {
    width: 100%;
    height: 60px;
    background-color:rgb(255, 196, 0);
    text-align: center;
    line-height: 60px;
}

.left {
    width: 20%;
    height: 100vh;
    background-color:pink;
    float: left;
}

.right {
    width: 80%;
    height: 100vh;
    background-color:rgb(50, 179, 205);
    float: right;
}
.content {
    width: 100%;
    height: 100vh;
    display:flex;
    justify-content: space-between;
}
</style>